<template>
	<view class="v_body">
		<uni-title type="h1" :title="formTitle" align="center"></uni-title>
		<view class="">
			<uni-forms :modelValue="formData" ref="form" :rules="rules">
				<uni-forms-item required label="用户名" name="username">
					<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item v-show="registerFlag" required name="email" label="邮箱">
					<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱" />
				</uni-forms-item>
				<uni-forms-item v-show="registerFlag" required name="phone" label="手机号">
					<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item required name="password" label="密码">
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item v-show="registerFlag" required name="newPassword" label="确认密码">
					<uni-easyinput type="password" v-model="formData.newPassword" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<view v-if="!registerFlag">
				<button @click="login">登录</button>
				<button @click="wexinLogin">微信登录</button>
				<button @click="toRegister">注册</button>
			</view>
			<view v-else>
				<button @click="regist">注册</button>
				<view class="f-je" @click="toLogin">已有账号，去登录</view>
			</view>
		</view>
		
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msg.msgType" :message="msg.messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	// import { showMessage } from '../../utils/message.js'
	import { login, register, loginWeixin } from '../../api/login.js'
	export default {
		data() {
			return {
				// 提示框变量
				msg: {
					msgType: '',
					messageText: ''
				},
				// 表单标题
				formTitle: '微帐-登录',
				registerFlag: false,
				formData: {
					username: '',
					password: '',
					newPassword: '',
					email: '',
					phone: ''
				},
				// 表单校验规则
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名',
							},
							{
								minLength: 6,
								maxLength: 15,
								errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					phone: {
						rules: [
							{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
							    format: 'phone',
							    errorMessage: '请输入正确的手机号',
							}
						]
					},
					// 对email字段进行必填验证
					email: {
					     rules: [{
								required: true,
								errorMessage: '请输入邮箱',
							},
							{
					        format: 'email',
					        errorMessage: '请输入正确的邮箱地址',
					    }]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 6,
								errorMessage: '密码长度不少于 {minLength} 位',
							}
						]
					},
					newPassword: {
						rules: [{
								required: true,
								errorMessage: '请输入确认密码',
							},
							{
								minLength: 6,
								errorMessage: '密码长度不少于 {minLength} 位',
							}
						]
					}
				}
			}
		},
		onShow(){
			if(this.$utils.isLogin()){
				this.msg = this.$utils.messageSuccess('您已登录')
				this.$refs.message.open()
				uni.switchTab({
					url: '/pages/account/account'
				});
			}
		},
		methods: {
			login() {
				// 部分校验
				this.$refs.form.validateField(['username', 'password']).then(res => {
					uni.showLoading({
						title: '登陆中'
					});
					// console.log('表单数据信息：', res);
					login(this.formData).then(res => {
						// console.log(res);
						uni.hideLoading();
						if (res.code === 200) {
							this.$utils.setStorage('uid', res.data.id)
							this.$utils.setStorage('token', res.data.token)
							// this.$utils.setStorage('user', res.data)
							this.$utils.setStorage('isLogin', true)
							this.msg = this.$utils.messageSuccess(res.msg)
							this.$refs.message.open()
							uni.switchTab({
								url: '/pages/account/account'
							});
						} else {
							uni.hideLoading();
							this.msg = this.$utils.messageError(res.msg)
							this.$refs.message.open()
						}
					}).catch(reason => {
						uni.hideLoading();
						// console.log(reason)
						this.msg = this.$utils.messageError(reason)
						this.$refs.message.open()
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
					this.msg = this.$utils.messageError(err)
					this.$refs.message.open()
				})
			},
			wexinLogin(){
				let _this = this
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
					  // console.log(loginRes);
					  loginWeixin(loginRes.code).then(res => {
						// console.log(res);
						uni.hideLoading();
						if (res.code === 200) {
							_this.$utils.setStorage('uid', res.data.id)
							_this.$utils.setStorage('token', res.data.token)
							// this.$utils.setStorage('user', res.data)
							_this.$utils.setStorage('isLogin', true)
							_this.msg = _this.$utils.messageSuccess(res.msg)
							_this.$refs.message.open()
							uni.switchTab({
								url: '/pages/account/account'
							});
						} else {
							uni.hideLoading();
							_this.msg = _this.$utils.messageError(res.msg)
							_this.$refs.message.open()
						}
					}).catch(reason => {
						uni.hideLoading();
						// console.log(reason)
						_this.msg = _this.$utils.messageError(reason)
						_this.$refs.message.open()
					})
				  },
				  fail:function(){
				  	console.log("微信登陆失败");
				  }
				});
			},
			toLogin(){
				this.registerFlag = false
				this.formTitle = '微帐-登录'
				// 重置表单
				this.$refs.form.resetFields();
			},
			toRegister(){
				this.registerFlag = true
				this.formTitle = '微帐-注册'
				// 重置表单
				this.$refs.form.resetFields();
			},
			regist() {
				this.$refs.form.validate().then(res => {
					if(this.formData.password !== this.formData.newPassword){
						this.msg = this.$utils.messageError('请两次密码不一致，请重新输入')
						this.$refs.message.open()
						this.formData.password = ''
						this.formData.newPassword = ''
						return 0;
					}
					uni.showLoading({
						title: '正在注册'
					});
					register(this.formData).then(res => {
						// console.log(res);
						uni.hideLoading();
						if (res.code === 200) {
							this.registerFlag = false
							this.msg = this.$utils.messageSuccess(res.msg)
							this.$refs.message.open()
							this.$refs.form.resetFields();
						}else{
							this.msg = this.$utils.messageError(res.msg)
							this.$refs.message.open()
						}
					}).catch(reason => {
						uni.hideLoading();
						console.log(reason)
						this.msg = this.$utils.messageSuccess(reason)
						this.$refs.message.open()
					})
				}).catch(err => {
					// console.log('表单错误信息：', err);
					this.msg = this.$utils.messageError(err[0].errorMessage)
					this.$refs.message.open()
				})
			}
		}
	}
</script>

<style>

</style>
